// components/blog-footer.tsx
import Link from "next/link"
import {GithubIcon, TwitterIcon, MailIcon, RssIcon, LinkedinIcon} from "lucide-react"
import {cn} from "@/lib/utils"

interface FooterProps {
    className?: string
    author: string
    email?: string
    github?: string
    twitter?: string
    linkedin?: string
    showRss?: boolean
    showCopyright?: boolean
    showSocial?: boolean
}

export function Footer({
                           className,
                           author,
                           email,
                           github,
                           twitter,
                           linkedin,
                           showRss = true,
                           showCopyright = true,
                           showSocial = true,
                       }: FooterProps) {
    const currentYear = new Date().getFullYear()

    return (
        <footer className={cn("bg-gradient-to-b from-background/80 to-background/90 border-t py-12", className)}>
            <div className="container mx-auto px-4">
                {/* 主要内容区块 */}
                <div className="grid grid-cols-1 gap-10 md:grid-cols-4">
                    {/* 博客简介 */}
                    <div className="space-y-4">
                        <h3 className="text-xl font-bold">{author}的博客</h3>
                        <p className="text-muted-foreground">
                            分享技术干货、生活思考和创作内容
                        </p>
                        {showSocial && (
                            <div className="flex space-x-4 pt-2">
                                {email && (
                                    <Link
                                        href={`mailto:${email}`}
                                        className="text-muted-foreground transition-colors hover:text-primary"
                                        aria-label="发送邮件"
                                    >
                                        <MailIcon className="h-5 w-5"/>
                                    </Link>
                                )}
                                {github && (
                                    <Link
                                        href={github}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="text-muted-foreground transition-colors hover:text-primary"
                                        aria-label="GitHub"
                                    >
                                        <GithubIcon className="h-5 w-5"/>
                                    </Link>
                                )}
                                {twitter && (
                                    <Link
                                        href={twitter}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="text-muted-foreground transition-colors hover:text-primary"
                                        aria-label="Twitter"
                                    >
                                        <TwitterIcon className="h-5 w-5"/>
                                    </Link>
                                )}
                                {linkedin && (
                                    <Link
                                        href={linkedin}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="text-muted-foreground transition-colors hover:text-primary"
                                        aria-label="LinkedIn"
                                    >
                                        <LinkedinIcon className="h-5 w-5"/>
                                    </Link>
                                )}
                                {showRss && (
                                    <Link
                                        href="/rss.xml"
                                        className="text-muted-foreground transition-colors hover:text-primary"
                                        aria-label="RSS订阅"
                                    >
                                        <RssIcon className="h-5 w-5"/>
                                    </Link>
                                )}
                            </div>
                        )}
                    </div>

                    {/* 快速链接 */}
                    <div className="space-y-4">
                        <h4 className="text-lg font-semibold">快速链接</h4>
                        <ul className="space-y-2 text-muted-foreground">
                            <li><Link href="/" className="hover:text-primary hover:underline">首页</Link></li>
                            <li><Link href="/about" className="hover:text-primary hover:underline">关于我</Link></li>
                            <li><Link href="/archives" className="hover:text-primary hover:underline">文章归档</Link>
                            </li>
                            <li><Link href="/tags" className="hover:text-primary hover:underline">标签分类</Link></li>
                        </ul>
                    </div>

                    {/* 技术分类 */}
                    <div className="space-y-4">
                        <h4 className="text-lg font-semibold">技术分类</h4>
                        <ul className="space-y-2 text-muted-foreground">
                            <li><Link href="/category/react" className="hover:text-primary hover:underline">React</Link>
                            </li>
                            <li><Link href="/category/nextjs"
                                      className="hover:text-primary hover:underline">Next.js</Link></li>
                            <li><Link href="/category/javascript"
                                      className="hover:text-primary hover:underline">JavaScript</Link></li>
                            <li><Link href="/category/css" className="hover:text-primary hover:underline">CSS</Link>
                            </li>
                        </ul>
                    </div>

                    {/* 联系信息 */}
                    <div className="space-y-4">
                        <h4 className="text-lg font-semibold">联系我</h4>
                        <ul className="space-y-2 text-muted-foreground">
                            {email && <li><Link href={`mailto:${email}`}
                                                className="hover:text-primary hover:underline">{email}</Link></li>}
                            <li><Link href="/guestbook" className="hover:text-primary hover:underline">留言板</Link>
                            </li>
                            <li><Link href="/sponsor" className="hover:text-primary hover:underline">赞助支持</Link>
                            </li>
                            <li><Link href="/newsletter" className="hover:text-primary hover:underline">订阅更新</Link>
                            </li>
                        </ul>
                    </div>
                </div>

                {/* 版权信息 */}
                {showCopyright && (
                    <div
                        className="mt-12 flex flex-col items-center justify-between gap-4 border-t pt-8 text-sm text-muted-foreground md:flex-row">
                        <p>© {currentYear} {author} 的个人博客. 保留所有权利.</p>
                        <div className="flex flex-wrap justify-center gap-4 md:gap-6">
                            <Link href="/privacy" className="hover:text-primary hover:underline">隐私政策</Link>
                            <Link href="/terms" className="hover:text-primary hover:underline">服务条款</Link>
                            <Link href="/sitemap.xml" className="hover:text-primary hover:underline">网站地图</Link>
                            <Link href="/status" className="hover:text-primary hover:underline">网站状态</Link>
                        </div>
                    </div>
                )}
            </div>
        </footer>
    )
}
